<!-- 此处是watchlist模块 -->
<template>
    <div class='container container--zone'>
        <div class="region region--primary">
            <!-- 左中两部分 -->
            <div class="component component--module watchlist">
                <div class="column column--primary">
                    <div class="header header--primary">
                        <h2 class="title">
                            <router-link class="link" to="/watchList">Watchlist</router-link>
                        </h2>
                    </div>
                    <div class="element element--watchlist lazyloaded">
                        <div v-if="token">
                            <div class="form">
                                <div class="form__item w25">
                                    <label class="screen-reader-text">Watchlist Menu</label>
                                    <el-icon class="icon-down">
                                        <ArrowDownBold />
                                    </el-icon>
                                    <select id="wl-menu" class="dropdown dropdown--form j-dropdown">
                                        <option value="0">New watchlist</option>
                                    </select>
                                </div>
                                <div class="form__item">
                                    <router-link class="btn btn--primary btn36" to="/watchList">
                                        <el-icon class="icon-plus">
                                            <Plus />
                                        </el-icon>
                                        <span class="label">Add Ticker</span>
                                    </router-link>
                                </div>
                            </div>
                        </div>
                        <div class="element element--message" v-if="!token">
                            <div class="message__text">
                                <h5 class="primary">Customize Sinopoly Watch</h5>
                                <p class="secondary">Have Watchlists? Log in to see them here or sign up to get started.
                                </p>
                            </div>
                            <div class="group group--buttons">
                                <router-link class="btn btn--primary" to="/singin">Create
                                    Account</router-link>
                                <span class="text">… or
                                    <router-link to='/login' class="link">LogIn</router-link></span>
                            </div>
                        </div>
                        <div class="message element element--message" v-if="token && watchData.length === 0">
                            <div class="message__text">
                                <h5 class="primary">No Items in Watchlist</h5>
                                <p class="secondary">There are currently no items in this Watchlist.</p>
                            </div>
                            <div class="group group--buttons cover">
                                <router-link class="btn btn--primary" to="/watchList"><i class="icon--plus"></i>Add
                                    Ticker</router-link>
                            </div>
                        </div>
                        <!-- 有数据时展示 -->
                        <div class="has-watchlist" v-if="watchData.length > 0">
                            <ul class="list list--watchlist j-table">
                                <li class="watchlist__header">
                                    <span class="ticker__icon"></span>
                                    <span class="ticker__company">Symbol</span>
                                    <span class="ticker__price">Last</span>
                                    <span class="ticker__change">
                                        <span class="m-hide">Change</span>
                                        <span class="m-show">Chg</span>
                                    </span>
                                    <span class="ticker__percent">
                                        <span class="m-hide">Change %</span>
                                        <span class="m-show">Chg %</span>
                                    </span>
                                    <span class="ticker__volume">Volume</span>
                                </li>
                                <li class="watchlist__item j-item" v-for="it in watchData" :key="it.uuid">
                                    <router-link class="ticker t-link"
                                        :to="{ name: 'stockDetail', params: { symbol: it.symbol } }">
                                        <bg-quote class="icon icon--arrow negative" style="border:none;"></bg-quote>
                                        <span class="ticker__company">
                                            <abbr class="company__symbol t-symbol">{{ it.symbol }}</abbr>
                                            <div class="company__name t-company">{{ it.company_name }}</div>
                                        </span>
                                        <span class="ticker__price ignore-color t-last"><bg-quote>{{ it.close
                                                }}</bg-quote></span>
                                        <span class="ticker__change t-change"><bg-quote class="negative">{{
                                            it.change_money }}</bg-quote></span>
                                        <span class="ticker__percent t-percent"><bg-quote class="negative">{{
                                            it.change_ratio }}%</bg-quote></span>
                                        <span class="ticker__volume t-volume"><bg-quote field="volume">{{ it.volume
                                                }}</bg-quote></span>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                        <!-- 发生错误时展示 -->
                        <div class="element element--message  j-error" style="display:none;">
                            <div class="message">
                                <div class="message__text">
                                    <h5 class="primary">Uh oh</h5>
                                    <p class="secondary">Something went wrong while loading Watchlist.</p>
                                </div>
                                <div class="group group--buttons cover">
                                    <router-link to="/singin" class="btn btn--primary">Go to
                                        Watchlist</router-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 中间部分 -->
                <div class="component component--aside recent-tickers recent-tickers">
                    <div class="header header--text">
                        <h2 class="title">
                            <span class="label">Recently Viewed Tickers</span>
                        </h2>
                    </div>
                    <div class="element element--recentTickers j-tickerList has-tickers lazyloaded"
                        v-if="viewList.length === 0">
                        <div class="element element--message j-message">
                            <div class="message">
                                <div class="message__text">
                                    <h3 class="primary">No Recent Tickers</h3>
                                    <p class="secondary">Visit a quote page and your recently viewed tickers will be
                                        displayed here.</p>
                                </div>
                                <div class="group group--buttons">
                                    <button class="btn btn--primary j-tickerSearch">Search Tickers</button>
                                </div>
                            </div>
                        </div>
                        <div v-if="viewList.length > 0">
                            <router-link class="ticker" v-for="ik in viewList" :key="ik.uuid"
                                :to="{ name: 'stockDetail', params: { symbol: ik.symbol } }">
                                <bg-quote class="posNegNeu t-updown positive">
                                    <h4 class="ticker__symbol t-symbol">{{ ik.symbol }}</h4>
                                    <span class="ticker__price ignore-color t-price"><bg-quote field="last"
                                            class="positive">{{ ik.close
                                            }}</bg-quote></span>
                                    <div class="ticker__change ignore-color">
                                        <span class="change__price ignore-color t-change"><bg-quote field="change"
                                                class="positive">{{
                                                    ik.changeMoney }}</bg-quote></span>
                                        <span class="change__percent ignore-color t-percent"><bg-quote
                                                field="percentChange" class="positive">{{
                                                    ik.changeRatio }}</bg-quote></span>
                                        <i class="icon"></i>
                                    </div>
                                </bg-quote>
                            </router-link>
                        </div>
                    </div>
                </div>
                <!-- 中间部分 -->
            </div>
        </div>
        <!-- 最右边 -->
        <div class="region region--aside sticky">
            <div class="sticky__innards" style="position: static;">
                <div class="component component--module ad">
                    <div class="element element--ad is-loaded">
                        <div id="ad-bottom-display-ad" class="j-ad" style="border: 0pt none;">
                            <a id="aw0" target="_blank" href="">
                                <img src="../../../assets/ceAdver.png" border="0" width="300" height="250" alt=""
                                    class="img_ad">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import homeRequest from "@/api/home.js";
const viewList = ref([])
const watchData = ref([])
import { getStorage } from "@/utils";
const token = ref('')
token.value = getStorage("spToken");
onMounted(() => {
    if (token.value) {
        getuserList()
        getviewList()
    }
})
const getuserList = () => {
    let data = {
        current: 1,
        size: 10
    }
    homeRequest.userWatchlist(data)
        .then((res) => {
            if (res.code === 0) {
                watchData.value = res.data.records
            }
        })
        .catch((e) => {
        });
}
const getviewList = () => {
    let data = {
        current: 1,
        size: 10,
    }
    homeRequest.viewTicketList({})
        .then((res) => {
            if (res.code === 0) {
                viewList.value = res.data.records
            }
        })
        .catch((e) => {
        });
}
</script>
<style scoped lang='scss'>
.ticker__change {
    display: flex;

    .icon {
        padding-top: 10px;
    }
}

.icon-down {
    position: absolute;
    right: 10px;
    z-index: 10;
    top: 11px;
}

.icon-plus {
    position: absolute;
    top: 11px;
    left: 14px;
    z-index: 10;
    color: #fff;
    font-weight: bold;
}

.btn36 {
    padding-left: 36px;
}

.watchlist .list--watchlist .ticker .icon:before {
    margin-top: -12px;
}
</style>